<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>API报表监控</title>
		<!-- 引入jquery.js -->
		<script type="text/javascript" src="../plugins/echarts/jquery-1.9.0.min.js"></script>
		<!-- 引入 echarts.js -->
		<script type="text/javascript" src="../plugins/echarts/echarts.js"></script>
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="../assets/css/chosen.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-timepicker.min.css" />
		<link rel="stylesheet" href="../assets/css/daterangepicker.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-colorpicker.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<!--<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />-->
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
		<script src="../assets/js/ace-extra.min.js"></script>
		<script src="../assets/js/jquery-2.1.4.min.js"></script>

		<!-- ace scripts -->
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/a-my-common.js"></script>
	</head>
	<body>
				<td>&nbsp;&nbsp;<i class="ace-icon fa blue">选择时间范围：</i></td>
				<td><input id="starttimeInput" type="date" name="time"  onchange = "TimeOnclick()"></td>
				<td><i class="ace-icon fa black">至</i></td>
       			<td><input id="endtimeInput" type="date" name="time" onchange = "TimeOnclick()" > </td>
       			<!--<td>&nbsp;&nbsp;<button class="btn btn-sm btn-primary" onClick="loadOneColumn()">查询</button></td>-->
		
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 800px;height:500px;"></div>
		<script type="text/javascript">

				//获取系统当前时间
    			var now = new Date();
    			var seperator1 = "-";
    			var month = now.getMonth()+1;
   				var date = now.getDate();
   				//获取上周时间
   				var lastweekdate = new Date(now-7*24*3600*1000);
		     	var monthweek = lastweekdate.getMonth()+1;
		     	var dayweek = lastweekdate.getDate();
    			if (month >= 1 && month <= 9) {
       				 month = "0" + month;
    			}
    			if (date >= 0 && date <= 9) {
        			date = "0" + date;
   				}
    			if (monthweek >= 1 && monthweek <= 9) {
       				 monthweek = "0" + monthweek;
    			}
    			if (dayweek >= 0 && dayweek <= 9) {
        			dayweek = "0" + dayweek;
   				}
    			var currentdate =now.getFullYear()+ seperator1 + month + seperator1 + date;
    			var lastweekdate =lastweekdate.getFullYear()+ seperator1 + month + seperator1 + dayweek;
    			//获取相应ID
				document.getElementById("starttimeInput").value=lastweekdate;
				document.getElementById("endtimeInput").value=currentdate;
				var startTime= lastweekdate+' 00:00:00';
				var endTime=currentdate+' 23:59:59';
				loadOneColumn();


			function TimeOnclick(){
			 	 startTime = $('#starttimeInput').val()+' 00:00:00'; //获取值
			 	 endTime = $('#endtimeInput').val()+' 23:59:59'; //获取值
			 	 loadOneColumn();
		    }
			function loadOneColumn() {
				var myChart = echarts.init(document.getElementById('main'));
				// 显示标题，图例和空的坐标轴
				myChart.setOption({
					color: ['#FF7F50'],
//					title: {
//						text: '各个API运行的次数'
//					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['line', 'bar', 'stack', 'tiled']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
					
					xAxis: {
						data: []
						/*axisLabel:{	    		    	
					interval:0,	    			    
					rotate:45,//倾斜度 -90 至 90 默认为0
					margin:2,	    			    
					textStyle:{	    			    	
						fontWeight:"bolder",	    			        
						color:"#000000"	    			    
					}	    			*/
					},
					yAxis: {},
					series: [{
						name: 'nums',
						type: 'bar',
						data: []
					}]
				});
				myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
				var names = []; //类别数组（实际用来盛放X轴坐标值）
				var nums = []; //销量数组（实际用来盛放Y坐标值）
				var tableName="ApiNumber";
				$.ajax({
					url: URL_TABLES+'/rapi?operFlag=queryApiMonitor&startStr='+startTime+"&endStr="+endTime+"&Mate_TablesName="+tableName,
					type: "post",
					async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					data: {},
					dataType: "json", //返回数据形式为json
					//       eval("var result = " +result);//把json形式的字符串变成可以直接使用的json对象s
					success: function(result) {
						//alert("图表请求数据成功!"+result);
						//请求成功时执行该函数内容，result即为服务器返回的json对象
						//注意，success: function(result)中的result参数可以改为别的名称，比如success: function(msg)，msg（result）为返回的数据。 此处为回调函数的参数
						if(result) {
							var datas = result.root;
							for(var i = 0; i < datas.length; i++) {
								names.push(datas[i].META_FLAG); //挨个取出类别并填入类别数组
							}
							for(var i = 0; i < datas.length; i++) {
								nums.push(datas[i].Meta_Count); //挨个取出销量并填入销量数组
							}
							myChart.hideLoading(); //隐藏加载动画
							myChart.setOption({ //加载数据图表
								xAxis: {
									data: names
								},
								series: [{
									// 根据名字对应到相应的系列
									name: '次数',
									data: nums
								}]
							});
						}
					},
					error: function(errorMsg) {
						//请求失败时执行该函数
						// alert("图表请求数据失败!"+errorMsg);
						myChart.hideLoading();
					}
				});
			};
			//  setInterval(function() {loadOneColumn()}, 5000);
		</script>
	</body>

</html>